<template>
	<view class="index">
		<view class="charts" @click="sign">
			<best-gauge :config="gaugeOption" bgColor="transparent" ref="gauge"></best-gauge>
		</view>
		<view class="login">
			<view class="padding shadow bg-white round lg margin-lr-lg body">
				<block v-if="isLogin">
					<view class="left">
						<view class="title">根据体脂率和基础代谢，您属于<text class="title-text">{{state.weightState|stateValue}}</text></view>
						<view class="info">健康体重范围：<text class="info-text">{{state.minSbw}}-{{state.maxSbw}}KG</text></view>
					</view>
				</block>
				<block v-else>
					<view class="left">
						<view class="title">你未登录</view>
						<view class="info">请先登录获取更详细的指标数据;</view>
					</view>
					<view class="right">
						<button class='cu-btn round lg btn-userinfo' @tap="goLogin">
							登录
						</button>
					</view>
				</block>
			</view>
		</view>
		<view class="content">
			<view class="padding shadow bg-white round lg margin-lr-lg body">
				<scroll-view scroll-y class="page">
					<view class="nav-list">
						<navigator hover-class="none" :url="item.url" class="nav-li light" navigateTo :class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
						 v-for="(item,index) in elements" :key="index">
							<view class="nav-title">{{item.title}}</view>
							<view class="nav-name"></view>
							<!-- <text :class="'cuIcon-' + item.cuIcon"></text> -->
						</navigator>
					</view>
				</scroll-view>
			</view>
		</view>

		<modal :custom="true" :show="showChoose" @cancel="closeChoose" @click="clickHander">
			<view class="choose-body">
				<view class="title">
					体重:<text class="number">{{chooseNumber}}</text>
					<texr class="unit">KG</texr>
				</view>
				<scroll-choose @scroll="chooseNumberHander" :scrollLeft="userInfo.userWeight"></scroll-choose>
			</view>
		</modal>
	</view>
</template>

<script>
	import bestGauge from '../../components/best-gauge/best-gauge.vue'
	import modal from '../../components/modal/modal.vue'
	import scrollChoose from '../../components/scroll-choose/scroll-choose.vue';
	export default {
		components: {
			bestGauge,
			modal,
			scrollChoose
		},
		data() {
			let _width = uni.upx2px(350);
			return {
				gaugeOption: { //定义参数
					id: 'weightChar',
					value: 75.8,
					unit: "KG",
					name: "体重",
					max: 150,
					bgColor: "transparent",
					axisTickLength: 2 //该属性与axisTick互斥，存在axisTickLength并大于0，axisTick就无效
				},
				elements: [{
						title: 'BMI分析',
						color: 'blue',
						url: "/pages/bmi/bmi"
					},
					{
						title: '体重分析',
						color: 'purple',
						url: "/pages/weight-info/weight-info"
					},
					{
						title: '食谱分析',
						color: 'mauve',
						url: "/pages/recipes/recipes"
					}	
				],
				chooseNumber: 0,
				showChoose: false,
				state: {}
			}
		},
		onLoad() {
			this.$api.getSign().then(res => {
				if (res.code) {
					let userInfo = Object.assign(this.userInfo, {
						sign: res.data,
						signDay: res.signDay,
						isSign: res.isSign
					})
					this.$store.dispatch('setUserInfoAction', userInfo)
					this.gaugeOption.value = this.userInfo.userWeight
				}
			})

		},
		computed: {
			isLogin() {
				return this.$store.getters.getisLogin
			},
			userInfo() {
				return this.$store.getters.getUserInfo
			}
		},
		onShow() {
			this.$set(this.gaugeOption, 'value', this.userInfo.userWeight)
			this.getWeighhState()
		},
		watch: {
			userInfo: {
				handler() {
					
				},
				immediate: true
			}
		},
		methods: {
			getWeighhState() {
				let state = this.$info.getWeight({
					weight: this.userInfo.userWeight,
					height: this.userInfo.userHeight,
					sex: this.$comm.isgender(this.userInfo.userSex)
				})
				this.state = state
			},
			closeChoose() {
				this.showChoose = false
			},
			sign() {
				if (!this.isLogin) {
					return
				}
				if (this.userInfo.isSign) {
					return this.$comm.errorToShow("今日已签到")
				}
				this.showChoose = true
			},
			chooseNumberHander(e) {
				this.chooseNumber = e
			},
			clickHander(e) {
				if (e.index == 1) {
					this.$api.userSign({
						userWeight: this.chooseNumber
					}).then(res => {
						if (res.code) {
							this.gaugeOption.value = this.chooseNumber
							this.userInfo.userWeight = this.chooseNumber
							this.userInfo.isSign = true
							this.$store.dispatch('setUserInfoAction', this.userInfo)
						}
						this.closeChoose()
						this.getWeighhState()
					})
				} else {
					this.closeChoose()
				}
			},
			goLogin() {
				this.$comm.switchTabTo("/pages/user/user")
			}
		},
		filters: {
			stateValue(state) {
				let val = "正常"
				switch (state) {
					case 1:
						val = "正常";
						break;
					case 2:
						val = "偏重";
						break;
					case 0:
						val = "偏瘦";
						break;
				}
				return val
			}
		}
	}
</script>

<style lang="scss">
	.index {
		.charts {
			margin-top: 60rpx;
		}

		.login {
			height: 180rpx;

			.body {
				padding-left: 40rpx;
				padding-right: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 30rpx;
					font-weight: bold;
				}

				.info {
					font-size: 24rpx;
					line-height: 50rpx;
				}

				.title-text {
					color: rgb(185, 205, 78);
					font-size: 30upx;
					font-weight: bold;
					margin-left: 5upx;
				}

				.info-text {
					color: rgb(185, 205, 78);
					margin-left: 5upx;
				}

				.right {
					.btn-userinfo {
						background-color: transparent;
						border: 1rpx solid rgba($color: #000000, $alpha: 0.3);
					}
				}
			}

		}

		.content {
			.body {
				padding-left: 40rpx;
				padding-right: 40rpx;
				border-radius: 40rpx;
				min-height: 40vh;
			}
		}
	}

	.choose-body {
		overflow: hidden;
		width: 520upx;
		display: flex;
		flex-direction: column;

		.title {
			text-align: center;
		}
	}
</style>
